import React from 'react';
import { Table, Select, InputNumber, Form } from 'antd';
import customValidator from '@/pages/OnboardAndLeave/LeaveManagement/Handover/utils/validator';

const { Option } = Select;

export default function VacationTable({ value, vacationLoading, onChange, getFieldDecorator, type }) {
    const columns = React.useMemo(
        () => [
            {
                title: '假期类型',
                dataIndex: 'holidayName',
                key: 'holidayName'
            },
            {
                title: '剩余时长',
                dataIndex: 'remainDuration',
                key: 'remainDuration',
                render: (val, record) => (
                    <span>
                        {record.holidayCode === 'CommonYear'
                            ? `${(val / (8 * 60)).toFixed(2)}天`
                            : `${(val / 60).toFixed(2)}小时`}
                    </span>
                )
            },
            {
                title: '处理方式',
                dataIndex: 'dealType',
                key: 'dealType',
                render: (val, record, index) => {
                    if (type === 'detail') {
                        return val ? <div>{val === 1 ? '折现' : '不折现'}</div> : <div>--</div>;
                    }
                    return (
                        <div>
                            <Form.Item style={{ margin: 0 }}>
                                {getFieldDecorator(`dealType${index}`, {
                                    rules: [{ required: true, message: '请选择处理方式' }]
                                })(
                                    <Select
                                        onChange={e => onChange(e, index, 'dealType')}
                                        placeholder="请选择"
                                        style={{ width: 100 }}
                                    >
                                        <Option value={1}>折现</Option>
                                        <Option value={2}>不折现</Option>
                                    </Select>
                                )}
                            </Form.Item>
                        </div>
                    );
                }
            },
            {
                title: '折现时长',
                dataIndex: 'discountingDurationUpperLimit',
                key: 'discountingDurationUpperLimit',
                render: (val, record, index) => {
                    if (type === 'detail') {
                        if (val && record.dealType === 1) {
                            return (
                                <span>
                                    {record.holidayCode === 'CommonYear'
                                        ? `${(val / (8 * 60)).toFixed(2)}天`
                                        : `${(val / 60).toFixed(2)}小时`}
                                </span>
                            );
                        }
                        return <span>--</span>;
                    }
                    return record.dealType === 1 ? (
                        <div>
                            <Form.Item style={{ margin: 0 }}>
                                {getFieldDecorator(`time${index}`, {
                                    rules: [
                                        (rule, data, callback) => {
                                            customValidator.discountLengthValidator(record, rule, data, callback);
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        min={0}
                                        onChange={e => onChange(e, index, 'num')}
                                        precision={2}
                                        style={{ marginRight: '5px' }}
                                    />
                                )}
                                {record.holidayCode === 'CommonYear' ? '天' : '小时'}
                            </Form.Item>
                        </div>
                    ) : (
                        <div style={{ minWidth: record.holidayCode === 'CommonYear' ? '109px' : '123px' }}>--</div>
                    );
                }
            }
        ]
        // [vacationOptions, value]
    );
    return (
        <div style={{ marginBottom: 16 }}>
            <Table columns={columns} dataSource={value} pagination={false} loading={vacationLoading} />
        </div>
    );
}
